<template>
    <div class="FootMusic" @click="updateDetailShow">
        <img :src="playList[playListIndex].al.picUrl" alt="" class="foot-img">
        <div class="foot-content">
            <div class="foot-name">{{playList[playListIndex].al.name}}</div>
            <div class="foot-explain">横滑可以切换上下首哦！</div>
        </div>
        <div class="foot-broadcast iconfont" @click="play" v-if="isbtnShow">&#xe608;</div>
        <div class="foot-broadcast iconfont" @click="play" v-else>&#xe662;</div>
        <div class="foot-list iconfont">&#xe613;</div>
        <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
    </div>
    <van-popup v-model:show="detailShow" position="bottom" :style="{ height: '100%',width: '100%' }">
        <MusicDetail :musicList="playList[playListIndex]" :play="play" :isbtnShow="isbtnShow" :addDuration="addDuration"/>
    </van-popup>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import MusicDetail from '@/components/MusicItem/MusicDetail.vue'
export default {
    data() {
        return {
            interVal: 0
        }       
    },
    components: {
        MusicDetail
    },
    computed: {
        ...mapState(['playList','playListIndex','isbtnShow','detailShow','currentTime'])
    },
    mounted(){
        console.log(this.$refs);
        this.$store.dispatch("getLyric", this.playList[this.playListIndex].id);
    },
    updated() {
        this.$store.dispatch("getLyric", this.playList[this.playListIndex].id); 
        this.addDuration();      
    },
    methods: {
        play: function () {
            if (this.$refs.audio.paused) {
                this.$refs.audio.play();
                this.updateisbtnShow(false)
                this.updateTime()//播放即调用
            } else {
                this.$refs.audio.pause()
                this.updateisbtnShow(true)
                clearInterval(this.interVal)//暂停就清除
            }
        },
        addDuration: function () {
            this.updateDuration(this.$refs.audio.duration)    
        },
        updateTime: function () {
            this.interVal = setInterval(() => {
                this.updateCurrentTime(this.$refs.audio.currentTime)
            },50)      
        },
        ...mapMutations(['updateisbtnShow','updateDetailShow','updateCurrentTime','updateDuration'])
    },
    watch: {
        playListIndex: function () {
            this.$refs.audio.autoplay = true;
            if (this.$refs.audio.paused) {
                this.updateisbtnShow(false)
            }
        },
        playList: function () {
            if (this.isbtnShow) {
                this.$refs.audio.autoplay = true;
                this.updateisbtnShow(false)
            }
        }
    }
    
}
</script>

<style lang="less" scoped>
.FootMusic{
    display:flex ;
    width: 100%;
    height: 1.3rem;
    background-color: #fff;
    border-top: 1px solid rgba(0,0,0,.1);
    position: fixed;
    bottom: 0;
    .foot-img{
        margin: .15rem .2rem;
        width: .8rem;
        height: .8rem;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 50%;
    }
    .foot-content{
        width: 63%;
        margin-top: .25rem;
        .foot-name{
            font-weight: 700;
            font-size: .24rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .foot-explain{
            margin-top: .06rem;
            font-size: .22rem;
            color: #ccc;
        }
    }
    .foot-broadcast{
        margin-top: .3rem;
        font-size: .5rem;
    }
    .foot-list{
        margin-top: .3rem;
        margin-left: .25rem;
        font-size: .5rem;
    }
}    
</style>